<template>
  <div>
    <el-card class="box-card">
      <mytitle :showLine="false">投入品使用记录</mytitle>
      <div class="topBth">
        <div>
             <span>使用日期：</span>
             <el-date-picker
                style="width: 240px;"
                v-model="value1"
                
                type="daterange"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder=""
                end-placeholder=""
                @change="timeChange">
              </el-date-picker>
         </div>
         <div>
             <span>操作人：</span>
              <el-select style="width: 200px;" v-model="info.operatorName" placeholder="请选择"  v-loading="loadings" @visible-change="operatorChange">
              <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
                </el-option> 
              </el-select> 
         </div>
          <div>
             <span>投入品名称：</span>
             <el-input type="text"  v-model="info.variableInputName" style="width: 140px;"  />
          </div>
           <div>
            <el-button  @click="searchTo" type="success" >搜索</el-button>
              <el-button type="success"  @click="clearSearch" plain>重置</el-button>
          </div>
      </div>

      <el-table ref="singleTable" v-loading="loading" :header-cell-style="{ color: '#292B2B', background: '#EAF9F4' }"
        :data="tableData" border style="width: 100%">

        <el-table-column label="使用时间" width="220" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.useTime | formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作人" align="center">
        </el-table-column>
        <el-table-column prop="farmOperation" label="农事操作" align="center">
        </el-table-column>
        <el-table-column prop="varietyName" label="投入品名称" align="center">
        </el-table-column>
        <el-table-column prop="input" label="投入量" align="center">
        </el-table-column>
        <el-table-column prop="surplus" label="剩余量" align="center">
        </el-table-column>
        <el-table-column prop="landName" label="地块名称" align="center">
        </el-table-column>
        <el-table-column prop="fosterName" label="租赁人" align="center">
        </el-table-column>
      </el-table>
      <div class="pagination-box">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="info.pageNum"
          :page-size="info.pageSize" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import { variableInputUsageRecord,findAllOperator } from '../util/api.js'
export default {
  data() {
    return {
      loading: false,
      loadings:false,
      value1:[],
      info: {
        pageNum: 1,
        pageSize: 6,
        beginTime: "",
        endTime: "",
        operatorName: "",
        variableInputName: ""
      },
      total: 0,
      tableData: [],
      options:[],
    }
  },
  mounted() {
    this.info.variableInputName = this.$route.query.variableInputName
    this.variableInputUsageRecord()
  },
  methods: {
    async variableInputUsageRecord() {
      this.loading = true
      let res = await variableInputUsageRecord(this.info)
      if (res.code != 200) return
      this.total = res.data.total
      this.tableData = res.data.rows
      this.loading = false
    },
    async findAllOperator(){
      this.loadings = true
      let res = await findAllOperator()
       if(res.code!=200) return 
       this.options = res.data
       this.loadings = false  
    },
    operatorChange(val){
         if(val)this.findAllOperator()
    },
    handleCurrentChange(val) {
      this.info.pageNum = val
      this.variableInputUsageRecord()
    },
    timeChange(){
          if(this.value1==null){
            this.info.endTime = '';
            this.info.beginTime = '';
          }else{
            this.info.endTime = this.value1[1]
            this.info.beginTime = this.value1[0]
          }
          
    },
    searchTo(){
      this.variableInputUsageRecord()
    },
    clearSearch(){
       this.value1=[]
       this.info= {
            pageNum: 1,
            pageSize: 6,
            beginTime: "",
            endTime: "",
            operatorName: "",
            variableInputName: ""
       },
       this.variableInputUsageRecord()
    }
  }
}
</script>
<style lang="less" scoped>
.box-card {
  width: 100%;
  margin: 14px 0;

  .pagination-box {
    width: 100%;
    padding: 20px;

    .el-pagination {
      text-align: right;
    }
  }
}
.topBth{
  width: 100%;
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
</style>